<template>
	<view class="">

		<!-- 项目 -->
		<view class="module-box project-box">
			<view class="acea-row row-middle row-between">
				<view class="module-title">项目</view>
				<view class="acea-row row-middle look-more" @click="toPages('/pages/others/projectsList/projectsList')">
					查看更多
				</view>
			</view>
			<view class="list">
				<scroll-view scroll-x="true" style="white-space: nowrap;margin-top: 28rpx;">
					<view class="item" v-for="(item,index) in projectList" :key="index"
						@click="toPages('/pages/details/project/project?id='+item.id)">
						<view class="img">
							<image :src="item.thumbnail"></image>
							<!-- <view class="acea-row row-middle distance">
								<image src="@/static/images/location.png" mode=""></image>
								<view>1.4km</view>
							</view> -->
						</view>
						<view class="name">{{ item.name }}</view>
						<view class="address">{{ item.address  || '不详'}}</view>
						<view class="price">{{ item.floorage?item.floorage+'元/㎡'  : '不详'}} </view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 地图找铺 -->
		<view class="module-box map-box">
			<!-- <web-view src="/static/html/webView.html"></web-view> -->
			<view class="acea-row row-middle row-between">
				<view class="module-title">地图找铺</view>
			</view>
			<!--" -->
			<view class="map">
				<map style="width: 100%; height: 150px;" id="map" :scale="mapScale" :latitude="latitude"
					:show-location="true" :longitude="longitude" :markers="covers" @markertap="mapMarkerTap"
					@click="toPages('/pages/others/mapFinding/mapFinding')"></map>
			</view>
			<view class="acea-row row-middle row-between shop-num">
				<view class="item">
					<view class="num">{{mapObj.transShop}}<text>套</text></view>
					<view class="text">在转商铺</view>
				</view>
				<view class="item">
					<view class="num">{{mapObj.rentOfTheShop}}<text>元/㎡/月</text></view>
					<view class="text">本铺租金</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between shop-price">
				<view class="item">
					<view class="num">{{mapObj.minimum }}<text>元/㎡/月</text></view>
					<view class="text add-sanjiao">周边最低租金</view>
				</view>
				<view class="item">
					<view class="num">{{mapObj.maximum}}<text>元/㎡/月</text></view>
					<view class="text sub-sanjiao">周边最高租金</view>
				</view>
				<view class="item">
					<view class="num">{{mapObj.surrounding}}<text>元/㎡/月</text></view>
					<view class="text">周边平均租金</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import taskItem from '@/pages/others/components/taskItem.vue';
	// import AMapLoader from '@amap/amap-jsapi-loader';
	import {
		getProjectApi,
		getInformationApi,
		getTudListApi,
		getHomePageMapList
	} from '@/api/api.js'

	import {
		MapAllApi
	} from '@/api/subletOfShop.js'
	import {
		getLocation
	} from '@/filters/commFilter.js'

	export default {
		components: {
			taskItem
		},
		mounted() {
			this.latitude = this.$location.latitude;
			this.longitude = this.$location.longitude;
			this.getProjectList();
			this.getTudList();
			this.getMapList();
			this.getMapObj();
		},
		data() {
			return {
				tudData: {},
				//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
				map: null,
				// 地图
				latitude: 39.909,
				longitude: 116.39742,
				markerId: '',
				mapScale: 12,
				covers: [],
				// 浏览信息头像数组
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				demandIdx: 0, //我的需求当前下标
				demandLength: 4, //我的所有需求
				needsList: [1, 2, 3, 4],
				taskList: [1, 2, 3, 4],
				brandShopList: [1, 2, 3, 4, 5],
				projectList: [1, 2, 3],
				mapObj: {}
			}
		},
		methods: {
			async getTudList() {
				try {
					let {
						longitude,
						latitude
					} = await getLocation();
					let res = await getTudListApi({
						longitude,
						latitude
					});
					this.tudData = res.regeocode;
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getProjectList() {
				try {
					let res = await getProjectApi({
						city: this.$city,
					});
					this.projectList = res.data.list;
				} catch (e) {
					//TODO handle the exception

				}
				console.log('index_projectList', this.projectList)
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/details/shopRent/shopRent'
				})
			},
			toPages(path) {
				uni.navigateTo({
					url: path
				})
			},
			mapMarkerTap(e) {
				// console.log(e)
				var id = e.markerId
				let index = 0
				// var name = this.covers[id - 1].name
				for (let i = 0; i < this.covers.length; i++) {
					if (id == this.covers[i].id) {
						index = i
					}
				}
				// console.log(index)
			},
			needsSwiperChange(e) {
				// console.log(e)
				this.demandIdx = e.detail.current;
			},
			async getMapList() {
				try {
					let {
						data
					} = await MapAllApi({
						city: this.$city,
						latitude: this.latitude,
						longitude: this.longitude,
						distances: 500 * 1000,
						limit: 99999,
					})
					let list = [];
					data.list.forEach((item) => {
						item.list.forEach(child => {
							list.push(child)
						})
					})
					this.covers = list.map(item => {
						return {
							longitude: item.longitude,
							latitude: item.latitude,
							iconPath: 'https://image.shanghepu.com/cdn/images/dingwei.png',
							name: item.title,
							width: 30, //宽
							height: 30, //高
							id: item.buystoreId ? Number(item.buystoreId) : (item.askrentId ? Number(item
								.askrentId) : Number(item.id))
						}
					});
				} catch (e) {
					//TODO handle the exception
				}
			},
			getMapObj() {
				getHomePageMapList({
					latitude: this.latitude,
					longitude: this.longitude,
				}).then(res => {
					if (res.code == 200) {
						this.mapObj = res.data
					}
					console.log('MapObj', res)
				})
			}
		}
	}
</script>

<style lang="scss">
	.news-data {
		border-top: 1px solid rgba(247, 247, 247, 1);

		image {
			width: 84rpx;
			height: 84rpx;
		}

		.news-list {
			width: calc(100% - 126rpx);
			height: 84rpx;

			.news-swiper,
			.news-swiper-item,
			.swiper-item {
				height: 100%;
			}

			.news-item {
				padding-left: 16rpx;
				position: relative;

				&::after {
					display: block;
					content: '';
					position: absolute;
					width: 4rpx;
					height: 4rpx;
					background: #000000;
					border-radius: 50%;
					top: 50%;
					transform: translateY(-4rpx);
					left: 0;
				}

				.news-cont {
					width: 80%;
					font-size: 28rpx;
					color: rgba(56, 56, 56, 1);
				}

				.news-time {
					font-size: 22rpx;
					color: rgba(166, 166, 166, 1);
				}
			}

			.news-item~.news-item {
				margin-top: 10rpx;
			}
		}
	}

	// 我的需求
	.demand-box {
		.demand-num {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(212, 212, 229, 1);
		}

		.demand-swiper {
			width: 100%;

			// min-height: 502rpx;
			.swiper-box,
			.swiper-item {
				width: 100%;
				// height: 402rpx;
			}

			// 需求图片及信息
			.demand-info {
				margin-top: 30rpx;
				position: relative;

				.demand-info-tip {
					position: absolute;
					left: 0px;
					top: 0px;
					width: 66rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;

				}

				image {
					display: block;
					margin: 0;
					width: 236rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}

				.demand-info-l {
					width: calc(100% - 236rpx - 20rpx);
					height: 210rpx;

					.info-tit {
						width: 100%;
						margin-bottom: 8rpx;
					}

					.info-money {
						width: 100%;
						margin-bottom: 8rpx;

						.rent-box {
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(238, 33, 45, 1);

							text {
								font-size: 36rpx;
								font-weight: 700;
								color: rgba(238, 33, 45, 1);
							}
						}

						.transfer-box {
							margin-left: 18rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(56, 56, 56, 1);

							text {
								font-weight: 700;
							}
						}
					}

					.advantage-box {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);

						.advantage {
							padding: 0 12rpx;
							// width: 104px;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 4rpx;
							background: rgba(255, 232, 234, 1);
							letter-spacing: 0.4rpx;
							margin-left: 14rpx;
							margin-bottom: 10rpx;
							white-space: nowrap;
						}
					}
				}
			}

			// 适合场所

			.suitable-box {
				margin-top: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(82, 104, 139, 1);
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgba(238, 238, 238, 1);

				.suitable {
					display: inline-block;
					letter-spacing: 0.4rpx;
					padding: 10rpx;
					border-radius: 4rpx;
					background: rgba(248, 249, 253, 1);
					margin-left: 12rpx;
					white-space: nowrap;
				}
			}

			// 浏览咨询统计
			.visit-box {
				margin-top: 30rpx;

				.visit-advtar {
					width: 40%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}

				.visit-l {
					width: 60%;
					height: 46rpx;

					.visit-num {
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
					}
				}

			}

			// 匹配信息
			.matching-box {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}


	// 悬赏任务
	.task-box {
		.task-more-btn {
			margin: 24rpx auto;
			width: 222rpx;
			height: 52rpx;
			opacity: 1;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 26rpx;
			font-weight: 400;
			line-height: 52rpx;
			color: rgba(238, 33, 45, 1);
			text-align: center;
		}

		.task-top-btn {
			width: 154rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}


	}

	// 品牌商家
	.brand-merchant {

		.merchant-num {

			/** 文本4 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			text {
				/** 文本3 */
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(247, 5, 5, 1);
			}
		}

		.merchant {
			width: 162rpx;
			margin-right: 28rpx;

			image {
				width: 162rpx;
				height: 124rpx;
				opacity: 1;
				border-radius: 10rpx;
			}

			.text {
				width: 162rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
				margin-top: 18rpx;
				text-align: center;
			}
		}
	}


	// 项目
	.project-box {
		.list {
			.item {
				width: 210rpx;
				display: inline-block;
				margin-right: 24rpx;

				.img {
					width: 100%;
					height: 124rpx;
					border-radius: 10rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}

					.distance {
						position: absolute;
						padding: 12rpx;
						bottom: 0;
						left: 0;
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);

						image {
							width: 16rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
					}
				}

				.name {
					width: 100%;
					font-size: 28rpx;
					line-height: 40rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}

				.address {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: rgba(166, 166, 166, 1);
				}

				.price {
					width: 100%;
					font-size: 26rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: rgba(238, 33, 45, 1);
				}
			}
		}
	}

	.map-box {
		.map {
			margin-top: 18rpx;
		}

		.shop-num {
			padding: 32rpx 0;
			border-bottom: 1px solid rgba(238, 238, 238, 1);

			.item {
				width: 50%;
				text-align: center;

				.num {
					font-size: 36rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 40rpx;
					color: rgba(0, 0, 0, 1);

					text {
						font-size: 24rpx;
						color: rgba(179, 179, 179, 1);
					}
				}

				.text {
					font-size: 22rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: rgba(179, 179, 179, 1);
				}
			}

			.item~.item {
				border-left: 1px solid rgba(238, 238, 238, 1);
			}
		}

		.shop-price {
			padding: 32rpx 0;

			// border-bottom: 1px solid rgba(238, 238, 238, 1);
			.item {
				width: 33%;
				text-align: center;

				.num {
					font-size: 36rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 40rpx;
					color: rgba(0, 0, 0, 1);

					text {
						font-size: 24rpx;
						color: rgba(179, 179, 179, 1);
					}
				}

				.text {
					font-size: 22rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: rgba(179, 179, 179, 1);
				}
			}

			.item~.item {
				border-left: 1px solid rgba(238, 238, 238, 1);
			}

			.add-sanjiao {
				padding-left: 24rpx;
				position: relative;

				&::after {
					display: block;
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					left: 12rpx;
					top: 12rpx;
					border: 12rpx solid transparent;
					border-top-color: rgba(0, 186, 173, 1);
				}
			}

			.sub-sanjiao {
				padding-left: 24rpx;
				position: relative;

				&::after {
					display: block;
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					left: 12rpx;
					top: 4rpx;
					border: 12rpx solid transparent;
					border-bottom-color: rgba(240, 50, 63, 1);
				}
			}
		}
	}


	// 各个模块样式
	.module-box {
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx;

		.module-title {
			padding-left: 18rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			&::after {
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15rpx;
				width: 6rpx;
				height: 30rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 34, 46, 1);

			}
		}
	}

	.btns {
		.white-bg {
			width: 154rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			opacity: 1;
			border-radius: 32rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: #ffffff;
			font-size: 24rpx;
			color: rgba(238, 33, 45, 1);
			margin-right: 16rpx;
		}

		.red-bg {
			width: 154rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			opacity: 1;
			border-radius: 32rpx;
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			font-size: 24rpx;
			color: #ffffff;
		}
	}
</style>